<template>
  <div class="my-form-container" style="width: 100% !important; height: 100%; margin: 0;">
    <el-form :model="formData">
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>学期</span>
          </div>
          <label>{{ formData.xueqi }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>教学班名称</span>
          </div>
          <label>{{ formData.classname }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程编号</span>
          </div>
          <label>{{ formData.courseCode }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程名称</span>
          </div>
          <label>{{ formData.coursename }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>最大预选人数</span>
          </div>
          <label>{{ formData.maxnum }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>额定人数</span>
          </div>
          <label>{{ formData.reservenum }}</label>
        </el-form-item>
      </div>
    </el-form>
    <div style="display: flex; margin: 20px;">
      <div>
        <span class="itemTitle">状态：</span>
        <el-select v-model="status" size="mini" clearable placeholder="请选择状态" @change="handleChangeStatus">
          <el-option v-for="(item, index) in statusList" :key="index" :label="item.dictValue" :value="item.dictValue" />
        </el-select>
      </div>
      <div style="margin-left: 15px;">
        <span class="itemTitle">专业班次：</span>
        <el-select v-model="speClass" size="mini" clearable placeholder="请选择状态" @change="handleChangeSpeClass">
          <el-option v-for="(item, index) in classList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="button-style" style="margin-left: 15px; background: #FEF2E8; border: 1px solid #F46D02;" @click="handleClearReserve">
        <span style="color: #F46D02;">转正选</span>
      </div>
      <div class="button-style" style="margin-left: 15px; background: #F1FFFA; border: 1px solid #04C670;" @click="handleToReserve">
        <span style="color: #04C670;">转预选</span>
      </div>
      <div class="button-style" style="margin-left: 15px; background: #F0F9FF; border: 1px solid #5EADE9;" @click="handleChangeClass">
        <span style="color: #5EADE9;">转教学班</span>
      </div>
      <div class="button-style" style="margin-left: 15px; background: #FFF6F0; border: 1px solid #E9B535;" @click="handleAddStudent">
        <span style="color: #E9B535;">添加学员</span>
      </div>
      <div class="button-style" style="margin-left: 15px; background: #FFEEEF; border: 1px solid #FA533C;" @click="handleDeleteStudent">
        <span style="color: #FA533C;">删除学员</span>
      </div>
    </div>
    <el-table
      border
      :data="tableData"
      @selection-change="handleSelectionChange"
      class="xpaas-table-class"
      row-class-name="xpaas-row-class"
      cell-class-name="xpaas-cell-class"
      header-row-class-name="xpaas-header-row-class"
      header-cell-class-name="xpaas-header-cell-class">
      <el-table-column type="selection" width="60" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center;">
            <div class="button-style" style="margin-left: 15px; background: #FFEEEF; border: 1px solid #FA533C;" @click="handleDelete(scope.row)">
              <span style="color: #FA533C;">删除</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="studentcode" label="学号" show-overflow-tooltip align="center" />
      <el-table-column prop="studentname" label="姓名" show-overflow-tooltip align="center" />
      <el-table-column prop="sex" label="性别" show-overflow-tooltip align="center" />
      <el-table-column prop="studentstate" label="状态" show-overflow-tooltip align="center" />
      <el-table-column prop="zybc" label="专业班次" show-overflow-tooltip align="center" />
      <el-table-column prop="studentdui" label="队别" show-overflow-tooltip align="center" />
    </el-table>
    <el-dialog title="添加学员" :visible.sync="dialogShow" width="1500px">
      <el-form label-suffix="：" label-position="left" style="display: flex;">
        <el-form-item label-width="85px" label="培养层次">
          <el-select v-model="dialogForm.level" size="mini" clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="年级">
          <el-select v-model="dialogForm.grade" size="mini" clearable placeholder="请选择年级" style="margin: 0 20px 0 -15px;" @change="handleChangeYear">
            <el-option v-for="(item, index) in gradeList" :key="index" :label="item.xqszxn" :value="item.xqszxn" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="专业">
          <el-select v-model="dialogForm.major" size="mini" clearable placeholder="请选择专业" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in majorList" :key="index" :label="item.specialtyName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="学员队">
          <el-select v-model="dialogForm.team" size="mini" clearable placeholder="请选择学员队" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in teamList" :key="index" :value="item.id" :label="item.deptName" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="学号">
          <el-input v-model="dialogForm.studentNo" size="mini" clearable placeholder="请输入学号" style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <el-form-item label-width="55px" label="姓名">
          <el-input v-model="dialogForm.studentName" size="mini" clearable placeholder="请输入姓名" style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <div class="button-style" style="width: 80px; margin-top: 6px;" @click="handleSearch">
          <img src="@/assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </el-form>
      <el-table
        border
        :data="tableData1"
        :height="445"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        @selection-change="handleSelectionRow">
        <el-table-column type="selection" width="60" />
        <el-table-column prop="studentCode" label="学号" show-overflow-tooltip align="center" />
        <el-table-column prop="studentName" label="姓名" show-overflow-tooltip align="center" />
        <el-table-column prop="gender" label="性别" show-overflow-tooltip align="center" />
        <el-table-column prop="grade" label="年级" show-overflow-tooltip align="center" />
        <el-table-column prop="zy" label="专业" show-overflow-tooltip align="center" />
        <el-table-column prop="studentdui" label="学员队" show-overflow-tooltip align="center" />
        <el-table-column prop="pylevel" label="培养层次" show-overflow-tooltip align="center" />
      </el-table>
      <div style="display: flex; flex-direction: row-reverse; padding-bottom: 15px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="padding: 0; margin-top: 15px;">
        </el-pagination>
      </div>
      <div style="display: flex; justify-content: center;">
        <div class="button-style" @click="handleSave">
          <span>确&emsp;定</span>
        </div>
        <div class="button-style" style="margin-left: 50px; background: #FFEEEF; border: 1px solid #FA533C;" @click="dialogShow = false">
          <span style="color: #FA533C;">取&emsp;消</span>
        </div>
      </div>
    </el-dialog>
  </div>
<!--  <div class="manual-entry-container assessment-container">-->
<!--    <div v-if="data">-->
<!--      <ul>-->
<!--        <li>-->
<!--          <span class="active">学期</span>-->
<!--          <span>{{ data.course.xueqi }}</span>-->
<!--          <span class="active">教学班名称</span>-->
<!--          <span>{{ data.course.courseName }} </span>-->
<!--        </li>-->
<!--        <li>-->
<!--          <span class="active">课程编号</span>-->
<!--          <span>{{ classNo }}</span>-->
<!--          <span class="active">课程名称</span>-->
<!--          <span>{{ data.course.teachingClassName }}</span>-->
<!--        </li>-->
<!--        <li>-->
<!--          <span class="active">最大预选人数</span>-->
<!--          <span>{{ data.teachingClass.maxNum }}</span>-->
<!--          <span class="active">额定人数</span>-->
<!--          <span>{{ data.teachingClass.reserveNum }}</span>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <div>-->
<!--        <div class="plsz-pos">-->
<!--          <div-->
<!--            class="wrapper-container"-->
<!--            style="display: flex; flex-direction: column"-->
<!--          >-->
<!--            <div class="search-container">-->
<!--              <div class="search-container-left" style="display: flex;align-items: center;">-->
<!--                <div-->
<!--                  class="search-container-item"-->
<!--                  v-for="(select, index) in selectList"-->
<!--                  :key="index"-->
<!--                >-->
<!--                  <div v-if="select.type === 'select'" class="box">-->
<!--                    <span v-show="select.name">{{ select.name }}</span>-->

<!--                    <el-select-->
<!--                      v-model="select.val"-->
<!--                      style="width: 90px"-->
<!--                      size="mini"-->
<!--                      placeholder="请选择"-->
<!--                    >-->
<!--                      <el-option-->
<!--                        v-for="item in select.valList"-->
<!--                        :key="item.value"-->
<!--                        :label="item.label"-->
<!--                        :value="item.value"-->
<!--                      >-->
<!--                      </el-option>-->
<!--                    </el-select>-->
<!--                  </div>-->
<!--                  <div class="box" v-if="select.type === 'data'">-->
<!--                    <span class="demonstration" v-show="select.name">{{-->
<!--                      select.name-->
<!--                    }}</span>-->
<!--                    <el-date-picker-->
<!--                      v-model="select.val"-->
<!--                      type="date"-->
<!--                      placeholder="选择日期"-->
<!--                      prefix-icon="aaa"-->
<!--                    >-->
<!--                    </el-date-picker>-->
<!--                  </div>-->
<!--                  <div v-if="select.type === 'MultiSelect'" class="box"></div>-->
<!--                  <div v-if="select.type === 'btn'" class="box">-->
<!--                    <span class="demonstration" v-show="select.name">{{-->
<!--                      select.name-->
<!--                    }}</span>-->
<!--                    <el-input-->
<!--                      v-model="select.val"-->
<!--                      placeholder="请输入内容"-->
<!--                    ></el-input>-->
<!--                  </div>-->
<!--                </div>-->

<!--                <div-->
<!--                  style="width: 550px; display: flex; justify-content: flex-end"-->
<!--                >-->
<!--                <el-button type="warning" size="mini" @click="zhuanZX">转正选</el-button>-->
<!--                <el-button type="success" size="mini" @click="zhuanYX">转预选</el-button>-->
<!--                <el-button type="primary" size="mini" @click="zhuanJXB">转教学班</el-button>-->
<!--                <el-button type="warning" size="mini" @click="tianjiaXY">添加学员</el-button>-->
<!--                <el-button type="danger" size="mini" @click="delStudent">批量删除学员</el-button>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="table-container">-->
<!--        <el-table-->
<!--          :data="tableData"-->
<!--          border-->
<!--          fit-->
<!--          class="table-data"-->
<!--          style="height: calc(100vh - 380px);overflow-y: auto;width:100%"-->
<!--          @selection-change="handleSelectionChange"-->
<!--          width="100vw"-->
<!--        >-->
<!--        <el-table-column-->
<!--              prop=""-->
<!--              label="选择"-->
<!--              width="80"-->
<!--              align="center"-->
<!--              type="selection"-->
<!--            ></el-table-column>-->
<!--         <el-table-column-->
<!--            prop="opreate"-->
<!--            label="操作"-->
<!--            align="center"-->
<!--             width="200"-->
<!--          >-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="danger" size="mini" icon="el-icon-edit" @click="deleteRow(scope.row)">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            prop="studentNo"-->
<!--            label="学号"-->
<!--            width="300"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="name"-->
<!--            label="姓名"-->
<!--            width="200"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="sex"-->
<!--            label="性别"-->
<!--            width="200"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="status"-->
<!--            label="状态"-->
<!--            width="200"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="zybj"-->
<!--            label="专业班次"-->
<!--            width="255"-->
<!--            align="center"-->
<!--          />-->
<!--          <el-table-column-->
<!--            prop="db"-->
<!--            label="队别"-->
<!--            width="300"-->
<!--            align="center"-->
<!--          />-->
<!--        </el-table>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="wrapper-container" style="margin-left; 10px">-->
<!--      <div class="bottom-block" style="display: block;">-->
<!--        <div class="export-button">-->
<!--          <img src="../../../../assets/assessment/icon-export.png" alt="" />-->
<!--          <span>导出Excel</span>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

<!--    <el-dialog-->
<!--      title="设置课程简称"-->
<!--      :visible.sync="setClassNameDialog"-->
<!--      width="983px"-->
<!--    >-->
<!--      <div class="body-manual-container">-->
<!--        <div>-->
<!--          <ul>-->
<!--            <li>-->
<!--              <span class="active">教学班名称</span>-->
<!--              <span>{{ jxbmc }}</span>-->
<!--            </li>-->
<!--            <li>-->
<!--              <span class="active">课程名称</span>-->
<!--              <span>{{ kcmc }}</span>-->
<!--            </li>-->
<!--            <li>-->
<!--              <span class="active">原课程简称</span>-->
<!--              <span>{{ ykcjc }}</span>-->
<!--            </li>-->
<!--            <li>-->
<!--              <span class="active">现课程简称<span>*</span></span>-->
<!--              <span>-->
<!--                <el-input-->
<!--                  style="width: 220px; height: 28px"-->
<!--                  size="small"-->
<!--                  v-model="xkcjc"-->
<!--                ></el-input>-->
<!--              </span>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
<!--      </div>-->

<!--      <span slot="footer" class="dialog-footer">-->
<!--        <button class="green" @click="setClassNameDialog = false">确 定</button>-->
<!--      </span>-->
<!--    </el-dialog>-->
<!--  </div>-->
</template>

<script>
import { queryClassDetail, queryStudentList, removeStudents, updateStudents, queryStudentsList, batchAddstudents } from '@/api/trainingManagement/place'
import { reqCheckYearList, reqCheckLevelList, queryDictByCode, reqXydList } from '@/api/admin1/check'
import { reqSpeByYear } from '@/api/classHoursAddList/addList'
export default {
  data() {
    return {
      classNo: this.$route.query.classNo,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      formData: {},
      tableData: [],
      tableData1: [],
      selectedRows: [],
      status: '',
      speClass: '',
      statusList: [],
      classList: [],
      dialogShow: false,
      selectRow: [],
      selectRow1: [],
      dialogForm: {
        level: '',
        grade: '',
        major: '',
        team: '',
        studentNo: '',
        studentName: ''
      },
      levelList: [],
      gradeList: [],
      majorList: [],
      teamList: []
      // classNo:this.$route.query.classNo||'',
      //   selectList: [
      //   {
      //     type: "select",
      //     name: "状态:",
      //     val: "全部",
      //     valList: [
      //       {
      //         value: "全部",
      //         label: "全部",
      //       }
      //     ],
      //   },
      //   {
      //     type: "select",
      //     name: "专业班次:",
      //     val: "全部",
      //     valList: [
      //       {
      //         value: "全部",
      //         label: "全部",
      //       }
      //     ],
      //   },
      //   ],
      // setClassNameDialog: false, //设置课程检查弹窗
      // tableData: [],
      // jxbmc: "英语", //教学班名称
      // kcmc: "英语名称", // 课程名称
      // ykcjc: "英", //原课程简称
      // xkcjc: "", //现课程简称
      // data:{},
      // selectStudentList:[]//选中学生
    };
  },
  mounted() {
    queryDictByCode('courseSelectStatus').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.statusList = res.data.data
      }
    })
    if (this.classNo === undefined) {
      this.$message.warning('教学班信息丢失！')
    } else {
      queryClassDetail(this.classNo).then(res => {
        if (res.data.code === 200) {
          this.formData = res.data.data
        }
      })
      this.handleInitTable('init')
    }
    // if(this.classNo!=''){
    //   this.init();
    // }
  },
  methods: {
    handleSearch: function () {
      const params = {
        pylevelid: this.dialogForm.level,
        studentduiid: this.dialogForm.team,
        grade: this.dialogForm.grade,
        zyid: this.dialogForm.major,
        studentcode: this.dialogForm.studentNo,
        studentname: this.dialogForm.studentName
      }
      queryStudentsList(params, this.currentPage, this.pageSize).then(res => {
        if (res.data.code === 200) {
          this.tableData1 = res.data.data.records
          this.total = res.data.data.total
        }
      })
    },
    handleChangeYear: function (val) {
      reqSpeByYear(val).then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.majorList = res.data.data
        }
      })
    },
    handleSave: function () {
      if (this.selectRow1.length === 0) {
        this.$message.warning('请选择需要添加的学员！')
      } else {
        let data = []
        this.selectRow1.forEach(item => {
          data.push({
            classno: this.classNo,
            studentid: item.studentid,
            studentstate: '预选',
            courseid: this.formData.courseid,
            studentname: item.studentName,
            sex: item.gender,
            zybcid: item.zybcid,
            zybc: item.zy,
            studentdui: item.studentdui,
            studentcode: item.studentCode
          })
        })
        batchAddstudents(data).then(res => {
          if (res.data.code === 200) {
            this.handleInitTable()
            this.$message.success(res.data.data)
            this.dialogShow = false
          }
        })
      }
    },
    handleSelectionChange: function (val) {
      this.selectedRows = val
    },
    handleClearReserve: function () {
      let studentArray = []
      this.selectedRows.forEach(item => {
        if (item.studentstate !== '正选') {
          studentArray.push({
            id: item.id,
            studentstate: '正选'
          })
        }
      })
      if (studentArray.length > 0) {
        updateStudents(studentArray).then(res => {
          if (res.data.code === 200) {
            this.handleInitTable()
            this.$message.success('转正选成功！')
          } else {
            this.$message.warning('转正选失败！')
          }
        })
      } else {
        this.$message.warning('没有可转正选数据！')
      }
    },
    handleToReserve: function () {
      let studentArray = []
      this.selectedRows.forEach(item => {
        if (item.studentstate !== '预选') {
          studentArray.push({
            id: item.id,
            studentstate: '预选'
          })
        }
      })
      if (studentArray.length > 0) {
        updateStudents(studentArray).then(res => {
          if (res.data.code === 200) {
            this.handleInitTable()
            this.$message.success('转预选成功！')
          } else {
            this.$message.warning('转预选失败！')
          }
        })
      } else {
        this.$message.warning('没有可转预选数据！')
      }
    },
    handleChangeClass: function () {
      const studentNos = this.handleCheckSelectRows()
      if (studentNos.length > 0) {
        this.$router.push({
          path: '/admin/elective/turnClass',
          query: { selectedRows: this.selectedRows }
        })
      }
    },
    handleAddStudent: function () {
      this.dialogForm.level = ''
      this.dialogForm.grade = ''
      this.dialogForm.major = ''
      this.dialogForm.team = ''
      this.dialogForm.studentNo = ''
      this.dialogForm.studentName = ''
      reqSpeByYear("").then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.majorList = res.data.data
        }
      })
      reqXydList().then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.teamList = res.data.data
        }
      })
      reqCheckYearList().then((res) => {
        if (res.data.data && res.data.data.length > 0) {
          this.gradeList = res.data.data
        }
      })
      reqCheckLevelList().then(res => {
        if(res.data.data && res.data.data.length > 0){
          this.levelList = res.data.data[0].children
          this.handleSearch()
        }
      })
      this.dialogShow = true
    },
    handleDeleteStudent: function () {
      const studentNos = this.handleCheckSelectRows()
      if (studentNos.length > 0) {
        this.$confirm('是否删除选中的学员信息？', '操作提示', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          removeStudents(studentNos).then(res => {
            if (res.data.code === 200) {
              this.handleInitTable()
              this.$message.success('学员信息删除成功！')
            } else {
              this.$message.warning('学员信息删除失败！')
            }
          })
        })
      }
      return studentNos
    },
    handleDelete: function (row) {
      this.$confirm('是否删除学员信息？', '操作提示', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        removeStudents(row.id).then(res => {
          if (res.data.code === 200) {
            this.handleInitTable()
            this.$message.success('学员信息删除成功！')
          } else {
            this.$message.warning('学员信息删除失败！')
          }
        })
      })
    },
    handleCheckSelectRows: function () {
      let studentNos = ''
      let studentArray = []
      if (this.selectedRows.length === 0) {
        this.$message.warning('请选择学员记录！')
      } else {
        this.selectedRows.forEach(item => {
          studentArray.push(item.id)
        })
        studentNos = studentArray.join(',')
      }
      return studentNos
    },
    handleChangeStatus: function () {
      this.handleInitTable()
    },
    handleChangeSpeClass: function () {
      this.handleInitTable()
    },
    handleInitTable: function (type) {
      const params = {
        classno: this.classNo,
        studentstate: this.status,
        zybcid: this.speClass
      }
      queryStudentList(params).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.data
          if (type === 'init') {
            this.classList = []
            let map = new Map()
            this.tableData.forEach(item => {
              item.className = this.formData.classname
              if (!map.has(item.zybcid)) {
                map.set(item.zybcid, item.zybc)
                this.classList.push({ value: item.zybcid, label: item.zybc })
              }
            })
          }
        }
      })
    },
    handleSelectionRow: function (val) {
      this.selectRow1 = val
    },
    handleCurrentChange: function (val) {
      this.currentPage = val
      this.handleSearch()
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    }
  //   init(){
  //     this.getLast();
  //     this.getClassStudent(this.classNo);
  //     this.getClassInfo(this.classNo);
  //   },
  //   //获取专业班次列表
  //   async getLast(){
  //     let res = await getZYBC('');
  //     if(res.code == 200 && res.data.length>0){
  //       this.selectList[2].valList = res.data;
  //       }
  //   },
  //   handleSelectionChange(val) {
  //     this.selectStudentList = val;
  //   },
  //   getClassInfo(id){
  //     return new Promise(() => {
  //       let el = this
  //       xxkkkgl_getClassInfo(id).then(res => {
  //         if (res.data.code === 200) {
  //          el.data = res.data.data;
  //         }
  //       })
  //     })
  //   },
  //   getClassStudent(id){
  //     return new Promise(() => {
  //       let el = this
  //       xxkkkgl_getClassStudent(id).then(res => {
  //         if (res.data.code === 200) {
  //          el.tableData = res.data.data;
  //         }
  //       })
  //     })
  //   },
  //   tianjiaXY() {
  //     this.$router.push("/admin/elective/addStudent");
  //   },
  //   zhuanJXB() {
  //     this.$router.push("/admin/elective/turnClass");
  //   },
  //   // 信息修改
  //   editInfo() {},
  //   // 批量设置主讲教员
  //   batchSettingTeacher() {
  //     this.$router.push("/admin/elective/batchSettingTeacher");
  //   },
  //   //选择上课场地
  //   selectClassRoom() {
  //     this.$router.push("/admin/elective/selectClassRoom");
  //   },
  //   deleteRow(row, index) {
  //     let stuList =[row.id]
  //     let params={
  //       classNo:this.classNo,
  //       list:stuList
  //     }
  //     return new Promise(() => {
  //       xxkkkgl_deleteStudent(params).then(res => {
  //         if (res.data.code == 200) {
  //           this.$message.warning("删除成功!");
  //           this.init();
  //         }
  //       })
  //     })
  //   },
  //   delStudent(){
  //     if (this.selectStudentList.length > 0) {
  //       let stuList = []
  //       this.selectStudentList.forEach(item => {
  //         stuList.push(item.id)
  //       })
  //        let params={
  //         classNo:this.classNo,
  //         list:stuList
  //       }
  //       return new Promise(() => {
  //         let el = this
  //         xxkkkgl_deleteStudent(params).then(res => {
  //           if (res.data.code == 200) {
  //             this.$message.warning("删除成功!");
  //             this.init();
  //           }
  //         })
  //       })
  //     } else {
  //       this.$message.warning("请先选择要删除的课程列表");
  //       return
  //     }
  //   },
  //   zhuanZX(){
  //     if (this.selectStudentList.length > 0) {
  //       let stuList = []
  //       this.selectStudentList.forEach(item => {
  //         stuList.push(item.id)
  //       })
  //        let params={
  //         classNo:this.classNo,
  //         list:stuList
  //       }
  //       return new Promise(() => {
  //         xxkkkgl_zZx(params).then(res => {
  //           if (res.data.code == 200) {
  //             this.$message.warning("转正选成功!");
  //             this.init();
  //           }
  //         })
  //       })
  //     } else {
  //       this.$message.warning("请先选择要删除的课程列表");
  //       return
  //     }
  //   },
  //   zhuanYX(){
  //     if (this.selectStudentList.length > 0) {
  //       let stuList = []
  //       this.selectStudentList.forEach(item => {
  //         stuList.push(item.id)
  //       })
  //        let params={
  //         classNo:this.classNo,
  //         list:stuList
  //       }
  //       return new Promise(() => {
  //         xxkkkgl_zYx(params).then(res => {
  //           if (res.data.code == 200) {
  //             this.$message.warning("转预选成功!");
  //             this.init();
  //           }
  //         })
  //       })
  //     } else {
  //       this.$message.warning("请先选择要删除的课程列表");
  //       return
  //     }
  //   }
  }
}
</script>

<style scoped lang="less">
  .button-style {
    float: left;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
    > span {
      font-size: 14px;
      color: #51aef6;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-item {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label {
        width: 220px;
        padding-left: 0;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        color: #004ca7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
      .mustW {
        color: red;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    label {
      width: 100%;
      margin: 10px 30px 0;
      color: #004ca7;
    }
  }
  .itemTitle {
    font-size: 14px;
    color: #004ca7;
  }
  /deep/ .el-dialog {
    height: 700px;
    overflow: hidden;
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
</style>
